<template>
  <view class="content" :style="{ paddingTop: statusBarHeight + 'px' }">
    <uni-nav-bar title="库存报表" fixed :border="false" height="88rpx" background-color="#f7f7f7" left-icon="left"
      @clickLeft="onClickLeft"></uni-nav-bar>
    <view class="topTag">
      <view class="stateBox">
        <view>日期：</view>
        <uni-datetime-picker v-model="time" type="daterange" @change="maskClick" start-placeholder="开始"
          end-placeholder="结束" />
      </view>
    </view>
    <view class="topTag">
      <view class="stateBox">
        <view>类型：</view>
        <uni-data-select v-model="type" :localdata="rangeType" @change="change"></uni-data-select>
      </view>
      <view class="stateBox">
        <view>排序：</view>
        <uni-data-select v-model="sort" :localdata="rangeSort" @change="change"></uni-data-select>
      </view>
    </view>
    <view class="container">
      <uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
        <uni-tr>
          <uni-th width="150" align="center">商品名称</uni-th>
          <uni-th width="150" align="center">库存数量</uni-th>
          <uni-th align="center">库存金额</uni-th>
          <uni-th width="204" align="center">周转率</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td align="center">{{ item.name }}</uni-td>
          <uni-td align="center">{{ item.name }}</uni-td>
          <uni-td align="center">
            <view class="name">{{ item.name }}</view>
          </uni-td>
          <uni-td align="center">{{ item.count }}</uni-td>
        </uni-tr>
      </uni-table>
      <view class="uni-pagination-box"><uni-pagination show-icon :page-size="page.pageSize" :current="page.pageNum"
          :total="page.total" @change="change" /></view>
    </view>
  </view>
</template>

<script>
import { reqSalesReport } from '@/apis/member.js'
export default {
  name: "InventoryInfo",
  data() {
    return {
      time: [],
      shiftList: [], //
      rangeType: [
        { value: '', text: "全部" },
        { value: '1', text: "标品" },
        { value: '0', text: "非标品" },
        { value: '0', text: "自营" },
        { value: '0', text: "临时" },
      ],
      rangeSort: [
        { value: '', text: "数量从大到小" },
        { value: '1', text: "数量从小到大" },
        { value: '0', text: "金额从大到小" },
        { value: '0', text: "金额从小到大" },
        { value: '0', text: "毛利从大到小" },
        { value: '0', text: "毛利从小到大" },
      ],
      type: '',
      sort: '',
      page: {
        pageNum: 1,
        pageSize: 30,
        total: 0
      },
      tableData: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      maxDate: '',
      minDate: '',
      triggered: false, // 是否触发下拉刷新
      loading: false, // 是否触发上拉加载
    }
  },
  onLoad() {
    // this.reqSalesReport()
  },
  onShow() {
  },
  methods: {
    // 供应链 
    async reqSalesReport() {
      const res = await reqSalesReport({ ...this.page, minDate: this.minDate, maxDate: this.maxDate })
      if (res.code === 200) {
        console.log('销售报表:', res.data);
        // this.shiftList = [...this.shiftList, ...res.data.list]
        // this.nextPage = res.data.nextPage
        // this.triggered = false
        // if (res.data.isLastPage) {
        //   this.loading = "noMore"
        // }
      }
    },
    maskClick(e) {
      console.log('e', e, this.time);
      this.time = e
      this.minDate = this.time.length ? this.time[0] : ''
      this.maxDate = this.time.length ? this.time[1] : ''
      this.page.pageNum = 1
      this.shiftList = []
      this.loading = "loading";
      this.reqSalesReport()
    },
    change() {

    }
  }
}
</script>
<style>
page {
  background: #f7f7f7;

}
</style>
<style lang="scss" scoped >
.content {
  height: calc(100vh);
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 28rpx !important;
}

view {
  box-sizing: border-box;
}

.topTag {
  height: 100rpx;
  display: flex;
  justify-content: start;
  align-items: center;
  border-bottom: 1px solid #eee;

  .stateBox {
    display: flex;
    align-items: center;
    // width: 45%;flex:1
    flex: 1;
    padding: 0 10rpx;
  }
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // background-color: palevioletred;
  // height: calc(100% - 388rpx);
  // border: 1px solid red;
  overflow: scroll;

  .uni-pagination-box {
    height: 100rpx;
  }
}


.uni-table-tr {
  &:first-child {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #fff;
  }
}

// /* 操作列固定 */
// .uni-table-tr .uni-table-th:last-child, .uni-table-tr .uni-table-td:last-child{
// 	position: sticky;
// 	right: 0;
// 	background-color: #fff;
// 	z-index: 1;
// }
.uni-table-th,
.uni-table-td {
  padding: 16rpx 10rpx;
}

.uni-table-td {
  line-height: 20rpx;
}

.uni-table-scroll {
  box-sizing: border-box;
}

.uni-group {
  display: flex;
  align-items: center;
}
</style>
